<template>
    <div class="ordering">
        <div class="heading">订单管理</div>
        <!-- 内容区域 -->
        <div class="content-view">
            <el-table :data="tabData" style="margin: auto">
                <el-table-column label="序号" type="index" width="200"/>
                <el-table-column label="订单编号" prop="orderNum" width="200"/>
                <el-table-column label="创建时间" prop="createTime" width="200px"/>
                <el-table-column class="remarks-text" label="详情" prop="remarks" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="handleDetails(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="state" width="100px">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.state === '0' ? 'success' : 'danger'">
                            {{ scope.row.state === '0' ? '已下单' : '已支付' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                    :current-page="pageable.pageNum"
                    :page-size="pageable.pageSize"
                    :total="pageable.total"
                    layout="total, prev, pager, next"
                    @current-change="handlePageChange"
            >
            </el-pagination>
            <!-- 空状态 -->
            <div v-if="tabData.length === 0" class="nodatas">没有订单数据</div>
        </div>

        <!-- 订单详情对话框 -->
        <el-dialog :visible.sync="dialogVisible" title="订单详情" width="50%">
            <el-table :data="orderInfo.cartList" style="margin: auto" width="100%">
                <el-table-column label="菜品" prop="dishName" width="200px"/>
                <el-table-column label="数量" prop="dishNum" width="200px"/>
                <el-table-column label="单价" prop="dishPrice" width="200px"/>
                <el-table-column label="总价" prop="dishTotalPrice" width="200px"/>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {getOrderApi} from "@/api/dish";
import {getUserInfo} from "@/utils/auth";

export default {
    name: 'Order',
    data() {
        return {
            // 表格数据
            tabData: [],
            userId: JSON.parse(getUserInfo()).id,
            // 订单详情
            orderInfo: {},
            // 订单详情弹窗
            dialogVisible: false,
            pageable: {
                pageNum: 1,
                pageSize: 5,
                total: 0
            }
        }
    },
    async mounted() {
        await this.getTableData();
    },
    methods: {
        async getTableData() {
            try {
                console.log('Fetching table data...');
                const {pageNum, pageSize} = this.pageable;
                const response = await getOrderApi({pageNum, pageSize, userId: this.userId});
                const {data} = response;
                console.log('Data fetched:', data);
                this.tabData = data.list;
                this.pageable = {
                    ...this.pageable,
                    pageNum: data.pageNum,
                    total: data.total,
                    pageSize: data.pageSize
                };
                this.$nextTick(() => {
                    console.log('Data set, forcing re-render');
                });
            } catch (error) {
                console.error('Failed to fetch order data:', error);
            }
        },
        handlePageChange(page) {
            this.pageable.pageNum = page;
            this.getTableData();
        },
        handleDetails(row) {
            this.orderInfo = row;
            this.dialogVisible = true;
        }
    }
}
</script>
